<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<!-- <view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view> -->
		<view class="filterItem" type="primary">
			<text>
				起始日期
			</text>
			<picker mode="date" :value="startTime" @change="DateChange1">
				<view class="picker">
					{{startTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem" type="primary">
			<text>
				终止日期
			</text>
			<picker mode="date" :value="endTime" @change="DateChange2">
				<view class="picker">
					{{endTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem">
			<text>
				{{isClient?"客户名称":"供应商"}}
			</text>
			<input type="text" placeholder="点击选择" :value="ClientName" @tap="showBName()" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
			<!-- <text>
				{{isClient?"客户名称":"供应商"}}
			</text>
			<input type="text" placeholder="请选择" v-model="ClientName"  @tap="showBName()" /> -->
			<!-- <button class="cu-btn stop text-white" v-show="showcxbtn == true">选择</button> -->
		</view>
		<!-- <QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" /> -->
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		onLoad(options) {
			this.type = options.type
			//采购
			if (options.type == 1) {
				this.isClient = true;
				this.ClientName = ""
			}
			//销售
			else {
				this.isClient = false;
				this.ClientName = ""
			}
		},
		data() {
			return {
				isClient:true,
				showcxbtn:false,
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				ClientName: "",
				StoreID: "",
				GoodsName: "",
				list: [],
				storeList: [],
				// isClient:false
			};
		},
		created() {
			let date = new Date();
			this.getTime()
		},
		methods: {
			clearFilter(type){
				this.ClientName = "";

			},
			DateChange1(e) {
				this.startTime = e.detail.value
			},
			DateChange2(e) {
				this.endTime = e.detail.value
			},
			getTime() {
				let yyyy = new Date().getFullYear();
				let mm = (new Date().getMonth() + 1)< 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1);
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				this.startTime = yyyy + '-' + mm + '-' + dd;
				this.endTime = yyyy + '-' + mm + '-' + dd;
			},
			custormInput() {
				console.log(this);
			},
			//获取焦点显示按钮
			showbtn() {
				this.showcxbtn = true;
			},
			//获取焦点显示按钮
			hidenbtn() {
				// this.showcxbtn = false;
			},
			//修改数据
			// changeDate() {
			// 	var pages = getCurrentPages(),
			// 		prevPage = null;
			// 	if (pages.length > 1) {
			// 		prevPage = pages[pages.length - 2];
			// 	}
			// 	var that = this;
			// 	let data = {
			// 		StartDate:this.startTime,
			// 		EndDate:this.endTime,
			// 		ClientName:this.ClientName
			// 	};
			// 	this.$eventHub.$emit('fire',data);
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// },
			// #ifndef MP
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					var pages = getCurrentPages(),
						prevPage = null;
					if (pages.length > 1) {
						prevPage = pages[pages.length - 2];
					}
					var that = this;
					let data = {
						StartDate:this.startTime,
						EndDate:this.endTime,
						ClientName:this.ClientName
					};
					this.$eventHub.$emit('fire',data);
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// #endif
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},
			//到查询客户界面
			showBName(e){
				this.AddListen();
				let type = this.isClient ? "0" : "1"
				// this.AddListen()
				uni.navigateTo({
					url: '../clientSelect/clientSelect?isClient='+type
				})
			},
			AddListen() {
				var _this = this;
				let data={
					ClientName:this.ClientName
				}
				this.$eventHub.$on('clientListen', function(data) {
					// _this.Obj = JSON.parse(ClientItem);
					// _this.ClientName = _this.Obj.ClientName
					data = JSON.parse(data);
					_this.ClientName =  data.ClientName;
					_this.ClientID = data.ClientID;
					_this.$eventHub.$off('clientListen');
					// console.log(ClientName)
				});
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss'
	// $bb-bg-color:rgba(124, 170, 216, 1);
	
	// button::after {
	// 	border: none;
	// 	padding: 0px;
	// }

	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #ebebeb;
	// }

	// .filterWrapper {
	// 	background: #FFF;
	// 	padding-bottom: 15upx;
	// }

	// .title-padding {
	// 	height: var(--status-bar-height);
	// 	background: $bb-bg-color;
	// 	box-sizing: content-box;
	// }

	// .filterHeader {
	// 	width: 100%;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	position: relative;
	// 	text-align: center;
	// 	background: $bb-bg-color;
	// 	color: #FFF;
	// 	font-size: 18px;
	// 	background-size: 100%;

	// 	.pd {
	// 		display: inline-block;
	// 		position: absolute;
	// 		margin-left: 10px;
	// 		top: 30upx;
	// 		left: 0px;
	// 		font-size: 14px;
	// 		width: 40upx;
	// 		height: 40upx;
	// 		background: url(../../static/back.png) no-repeat;
	// 		background-size: 100%;
	// 	}

	// 	.options {
	// 		position: absolute;
	// 		right: 0px;
	// 		top: 10px;
	// 		width: 80px;
	// 		display: flex;
	// 		text-align: right;

	// 		.setting {
	// 			width: 30px;
	// 			height: 30px;
	// 			background: url(../../static/sureFilter.png) no-repeat;
	// 			background-size: 30px;
	// 			border: none;
	// 			margin-left: 90upx;

	// 		}
	// 	}

	// }

	// .filterItem {
	// 	height: 120upx;
	// 	line-height: 120upx;
	// 	background: #FFF;
	// 	display: flex;
	// 	flex-direction: row;
	// 	box-sizing: border-box;
	// 	padding-left: 30upx;
	// 	padding-right: 30upx;
	// 	font-size: 32upx;
	// 	background: #FFF;

	// 	text {
	// 		flex: 1;

	// 		&:last-child {
	// 			text-align: right;
	// 		}
	// 	}
		
	// 	.stop {
	// 		background-color: rgb(124, 170, 216);
	// 	}
		

	// 	input {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 50upx;
	// 		border-bottom: 1px solid #ebebeb;
	// 	}

	// 	view.selectInput {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 22upx;
	// 		border-bottom: 1px solid #ebebeb;

	// 		input {
	// 			flex: 1;
	// 			height: 40upx;
	// 			line-height: 40upx;
	// 			margin-top: 50upx;
	// 			border-bottom: 1px solid #ebebeb;
	// 		}
	// 	}
	// }
</style>
